 <template>
 	<view>
 		<view class="background-container">
 			<view style="height: 40px;">
 				<image src="../../static/logo.png" alt="" style="width: 38px; height: 38px;margin-left: 80px;" />
 				<view class="text-overlay" style="font-weight: bold;font-size: 20px;">康云智联医疗平台</view>
 			</view>
 			<uni-search-bar style="margin-top: 15px;" class="search-bar" radius="20" placeholder="请输入具体药物,医院,科室,医生进行搜索" bgColor="#FFFFFF" @confirm="search" />
 		</view>
 		<view style="margin-bottom: 20rpx;">
 			<swiper circular autoplay :interval="3000" :duration="500" indicator-dots style="height: 320rpx;"
 				indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#006eff">
 				<swiper-item v-for="item in imgs" :key="item">
 					<image :src="item" alt="" style="width: 100%; height: 350rpx;" />
 				</swiper-item>
 			</swiper>
 		</view>

 		<view style="margin-bottom: 20rpx;">
 			<uni-notice-bar v-if="content" show-icon single :text="content" />
 			<uni-notice-bar v-else="content" show-icon single text="暂无通知" />
 		</view>
		<view style="margin-top: 10px;padding: 0;" class="box">
			<view style="display: flex;padding: 10px;">
				<view style="font-size: 18px;font-weight: bold;">推荐医院</view>
				<view style="margin-left: 15px;color: gray;margin-top: 4px;">热门医院</view>
				<view style="margin-left: 10px;color: gray;margin-top: 4px;">名医坐诊</view>
			</view>
			<view style="display: flex;flex-wrap: wrap;margin-top: 10px;gap: 5px;margin-left: 5px;">
				<view v-for="(item, index) in HospitalTOData" :key="index" style="width: 32%;"
					@click="goHospitalDetail(item.id)">
					<view class="box" style="">
						<view style="display: flex;">
							<view style="font-weight: bold;flex: 1;"> {{item.name}}</view>
							<image :src="item.avatar" style="width: 60px; height: 60px;flex: 1;"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
 		<view style="margin-top: 10px;padding: 0;" class="box">
 			<view style="display: flex;padding: 10px;">
 				<view style="font-size: 18px;font-weight: bold;">推荐专区</view>
 				<view style="margin-left: 15px;color: gray;margin-top: 4px;">专业治疗</view>
 				<view style="margin-left: 10px;color: gray;margin-top: 4px;">精准服务</view>
 			</view>
 			<view style="display: flex;flex-wrap: wrap;margin-top: 10px;gap: 5px;margin-left: 5px;">
 				<view v-for="(item, index) in departmentData" :key="index" style="width: 32%;"
 					@click="goOfficeDetail(item.id)">
 					<view class="box" style="">
 						<view style="display: flex;">
 							<view style="font-weight: bold;flex: 1;"> {{item.departmentName }}</view>
 							<image :src="item.photo" style="width: 60px; height: 60px;flex: 1;"></image>
 						</view>
 					</view>
 				</view>
 			</view>
 		</view>
 		<view class="box" style="display: flex;text-align: center;font-size: 18px;margin-top: 10px;">
 			<view style="flex: 1;">
 				<span :class="{ 'active' : currentActive === '医生推荐' }" @click="changeActive('医生推荐')">医生推荐</span>
 			</view>
 			<view style="flex: 1;">
 				<span :class="{ 'active' : currentActive === '好物推荐' }" @click="changeActive('好物推荐')">好物推荐</span>
 			</view>
 			<view style="flex: 1;">
 				<span :class="{ 'active' : currentActive === '健康须知' }" @click="changeActive('健康须知')">健康须知</span>
 			</view>
 		</view>

 		<view style="display: flex; flex-wrap: wrap; margin-top: 10px;">
 			<view v-for="(item, index) in DoctorTO10Data" :key="item.id" v-show="currentActive === '医生推荐'"
 				style="width: 50%; padding: 0 10rpx; box-sizing: border-box;">
 				<view style="margin-bottom: 20rpx;">
 					<view class="box" @click="goDoctoerDetail(item.id)">
 						<image :src="item.avatar" style="width: 100%; height: 200px;"></image>
 						<view style="display: flex;">
 							<span>
 								<span class="square-box">{{item.level}}</span>
 								<span
 									style="margin-left: 10rpx; font-weight: bold; font-size: 16px;">{{item.hospitalName}}</span>
 							</span>
 						</view>
 						<view style="display: flex;font-size: 14px;margin-top: 10rpx;">
 							<span style="margin-left: 10rpx;">{{item.officeName}}</span>
 							<span style="margin-left: 10rpx;">{{item.staff}}</span>
 							<span style="margin-left: 10rpx;font-weight: bold;">{{item.name}}</span>
 						</view>
 						<text v-for="(label, index) in item.tag" :key="index" class="oval-box"
 							style="margin-top: 10rpx; margin-left: 10rpx;border: 1px solid orange;color: orange;">
 							{{ label }}
 						</text>
 						<view style="display: flex;">
 							<view style="flex: 8; display: flex; color: red;">
 								<view style="margin-top: 10rpx;">￥</view>
 								<text style="font-size: 20px; margin-right: 10rpx;">50</text>
 								<view style="margin-top: 10rpx;">起</view>
 							</view>
 							<view style="flex: 1; font-weight: bold; margin-top: 10rpx;">></view>
 						</view>
 					</view>
 				</view>
 			</view>
 			<view v-for="(item, index) in medicinesTopData" :key="item.id" v-show="currentActive === '好物推荐'"
 				style="width: 50%; padding: 0 10rpx; box-sizing: border-box;">
 				<view style="margin-bottom: 20rpx;">
 					<view class="box" @click="goMedicinesDetail(item.id)">
 						<image :src="item.photo" style="width: 100%; height: 180px;"></image>
 						<view>
 							<view style="display: flex;">
 								<span>
 									<span class="square-box"
 										style="border: 1px solid red; color: white; background-color: #FF695C; margin-right: 10rpx;">自营</span>
 									<span style="font-weight: bold; font-size: 16px;">{{item.name}}</span>

 								</span>
 							</view>
 							<view style="margin-top: 5px;">{{item.medicinesStyleList[0].styleDescribe}}起/盒</view>
 							<view style="display: flex;">
 								<view style="flex: 8; display: flex; color: red;margin-top: 5px;">
 									<view style="margin-top: 5rpx;">￥</view>
 									<text
 										style="font-size: 18px; margin-right: 10rpx;">{{item.medicinesStyleList[0].price}}</text>
 									<view style="margin-top: 10rpx;">起/盒</view>
 								</view>
 								<view style="margin-top: 2px;">
 									<image src="../../static/imgs/购物车.png" style="width: 50rpx;" mode="widthFix">
 									</image>
 								</view>
 							</view>
 						</view>
 					</view>
 				</view>
 			</view>
 			<view v-for="(item, index) in TopPostData" :key="item.id" v-show="currentActive === '健康须知'"
 				style="width: 100%; padding: 0 10rpx; box-sizing: border-box;">
 				<view style="margin-bottom: 20rpx;">
 					<view class="box" @click="goPostDetail(item.id)">
 						<view style="display: flex;gap: 20px;">
 							<view style="flex: 3;">
 								<view style="font-size: 16px;font-weight: bold;">{{item.title}}
 									<uni-tag :text="item.typeName" type="success" style="margin-left: 5px;"></uni-tag>
 								</view>
 								<view style="display: flex;margin-top: 10px;">
 									<image src="../../static/icons/用户.png" style="width: 40rpx;" mode="widthFix">
 									</image>
 									<view style="margin-top: 5px;margin-right: 10px;">{{item.userName}}</view>
 									<image src="../../static/icons/眼睛.png" style="width: 40rpx;margin-top: 3px;"
 										mode="widthFix"></image>
 									<view style="margin-top: 5px;margin-right: 10px;">{{item.lookNum}}</view>
 									<image src="../../static/icons/点赞.png" style="width: 40rpx;margin-top: 3px;"
 										mode="widthFix"></image>
 									<view style="margin-top: 5px;margin-right: 10px;">{{item.clickNum}}</view>
 									<image src="../../static/icons/收藏.png" style="width: 40rpx;margin-top: 3px;"
 										mode="widthFix"></image>
 									<view style="margin-top: 5px;margin-right: 10px;">{{item.collectNum}}</view>
 								</view>
 							</view>
 							<image :src="item.img" style="width: 80px; height: 80px;flex: 1;">
 							</image>
 						</view>
 					</view>
 				</view>
 			</view>

 		</view>

 	</view>
 </template>

 <script>
 	export default {
 		data() {
 			return {
				
 				content: '',
 				noticeList: [],
 				departmentData: {},
 				DoctorTO10Data: {},
				HospitalTOData:{},
 				medicinesTopData: {},
 				TopPostData: {},
 				imgs: [
 					require('../../static/imgs/banner1.png'),
 					require('../../static/imgs/banner2.png'),
 					require('../../static/imgs/banner3.png'),
 				],
 				currentActive: '医生推荐',
 				user: uni.getStorageSync('xm-user')
 			}
 		},
 		onShow() {
 			this.loadDoctor()
 			this.loadNotice()
 			this.loadTopDepartment()
 			this.loadTopMedicines()
 			this.loadTopPost()
			this.loadHospital()
 		},
 		onHide() {
 			clearInterval(this.inter)
 			this.inter = null
 		},
 		methods: {
 			loadHospital() {
 				this.$request.get('/hospital/selectTopHospital').then(res => {
 					if (res.code === '200') {
 						this.HospitalTOData = res.data.slice(0, 6)
 					} else {
 						this.$message.error(res.msg)
 					}
 				})
 			},
 			loadTopPost() {
 				this.$request.get('/post/selectTopPost').then(res => {
 					if (res.code === '200') {
 						this.TopPostData = res.data.slice(0, 10);
 					} else {
 						this.$message.error(res.msg);
 					}
 				});
 			},
 			loadTopMedicines() {
 				this.$request.get('/medicines/selectAll').then(res => {
 					if (res.code === '200') {
 						// 按销量从高到低排序
 						this.medicinesTopData = res.data.slice(0, 10);
 					} else {
 						this.$message.error(res.msg);
 					}
 				});
 			},
 			loadTopDepartment() {
 				this.$request.get('/department/selectTopDepartment').then(res => {
 					if (res.code === '200') {
 						this.departmentData = res.data.slice(0, 6).map(item => {
 							// 将tag字符串转换为JavaScript数组
 							item.tag = JSON.parse(item.tag); // 将每个字符串转换为字符数组
 							return item;
 						});
 					} else {
 						this.$message.error(res.msg);
 					}
 				});
 			},
 			loadNotice() {
 				this.$request.get('/notice/selectAll').then(res => {
 					this.noticeList = res.data || []
 					let i = 0
 					this.content = this.noticeList.length ? this.noticeList[i].content : ''
 					// 切换展示公告内容
 					if (this.noticeList.length > 1) {
 						this.inter = setInterval(() => {
 							i++
 							if (i === this.noticeList.length) {
 								i = 0
 							}
 							this.content = this.noticeList[i].content
 						}, 5000)
 					}

 				})
 			},
 			loadDoctor() {
 				this.$request.get('/doctor/selectTopDoctor').then(res => {
 					if (res.code === '200') {
 						this.DoctorTO10Data = res.data.slice(0, 10).map(item => {
 							// 将tag字符串转换为JavaScript数组
 							item.tag = JSON.parse(item.tag); // 将每个字符串转换为字符数组
 							return item;
 						});

 					} else {
 						this.$message.error(res.msg)
 					}
 				})
 			},
 			changeActive(active) {
 				this.currentActive = active
 				console.log(this.currentActive)
 			},
			goHospitalDetail(hospitalId) {
				uni.navigateTo({
					url: '/pages/hospitalDetail/hospitalDetail?hospitalId=' + hospitalId
				})
			},
 			goDoctoerDetail(doctorId) {
 				uni.navigateTo({
 					url: '/pages/doctorDetail/doctorDetail?doctorId=' + doctorId
 				})
 			},
 			goMedicinesDetail(medicinesId) {
 				uni.navigateTo({
 					url: '/pages/medicinesDetail/medicinesDetail?medicinesId=' + medicinesId
 				})
 			},
 			goPostDetail(postId) {
 				uni.navigateTo({
 					url: '/pages/postDetail/postDetail?postId=' + postId
 				})
 			},
 			goOfficeDetail(departmentId) {
 				uni.navigateTo({
 					url: '/pages/officeDetail/officeDetail?departmentId=' + departmentId
 				})
 			},
 		}
 	}
 </script>

 <style>
 	.item {
 		padding: 10px 20px;
 		font-size: 18px;
 		cursor: pointer;
 	}

 	.active {
 		border-bottom: 2px solid #189500;
 		color: #189500;
 		padding-bottom: 5px;
 	}

 	.cartegory-item {
 		flex: 1;
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		flex-direction: column;
 		grid-gap: 20rpx;
 	}

 	.background-container {
 		position: relative;
 		/* 设置相对定位 */
 		width: 100%;
 		/* 宽度设置为100% */
 		height: 180rpx;
 		/* 可以根据需要调整高度 */
 		background-image: url('../../static/imgs/carousel.png');
 		/* 设置背景图片 */
 		background-size: cover;
 		/* 覆盖整个容器 */
 		background-position: center;
 		/* 背景图片居中 */
 		background-repeat: no-repeat;
 		/* 确保背景图片不重复 */
 	}

 	.text-overlay {
 		position: absolute;
 		/* 设置绝对定位 */
 		top: 5%;
 		/* 调整文字位置 */
 		left: 50%;
 		/* 水平居中 */
 		transform: translateX(-50%);
 		/* 仅水平居中 */
 		color: #FFFFFF;
 		/* 设置文本颜色 */
 		font-size: 15px;
 		/* 设置文本大小 */
 		z-index: 2;
 		/* 确保文本在背景图片之上 */
 		text-align: center;
 		/* 文本居中显示 */
 		width: 100%;
 		/* 设置宽度为100% */
 	}

 	.search-bar {
 		position: absolute;
 		top: 50rpx;
 		/* 调整搜索框位置 */
 		left: 50%;
 		/* 水平居中 */
 		transform: translateX(-50%);
 		/* 仅水平居中 */
 		width: 100%;
 		/* 设置搜索框宽度 */
 		z-index: 2;
 		/* 确保搜索框在背景图片之上 */
 		text-align: left;
 	}

 	.uni-searchbar {
 		padding: 10rpx !important;
 	}
 </style>